import React, { useEffect, memo, useState } from "react";
import { ScrollView, View } from "@tarojs/components";
import { ObsPoolHeader, ObsPoolComp, CertifiedPrompt } from "@/components";
import { observationPoolHomeList } from "@/services"
import { useSelector } from "react-redux";


import { Empty } from '@antmjs/vantui'
import Taro from '@tarojs/taro'


import './index.scss'


const ObsPool = () => {
  const navPosition = Taro.getStorageSync('nav-position') ? JSON.parse(Taro.getStorageSync('nav-position')) : {}
  const [poolList, setPoolList] = useState([])
  const [loading, setLoading] = useState(false)
  let { showDialog } = useSelector(state => state.certified)
  let [showPopup, setShowPopup] = useState(true)
  useEffect(() => {
    getPoolList()
  }, [])
  const getPoolList = async () => {
    if (loading) return
    setLoading(true)
    let result = await observationPoolHomeList({ status: 1 })
    if (result.data) {
      let arr = result.data.filter(item => item.reportList.length)
      setPoolList(arr)
    }
    setTimeout(() => {
      setLoading(false)
    }, 1000)
  }


  return (
    <>
      <View className='body'>
        <ObsPoolHeader></ObsPoolHeader>
        <ScrollView
          scrollY
          className='pool-body'
          style={{ marginTop: `${navPosition.top + navPosition.height + 10}px`, height: `calc(100vh - ${navPosition.top + navPosition.height + 10}px)` }}
          refresherTriggered={loading}
          refresherEnabled onRefresherRefresh={() => getPoolList()}
        >

          {
            poolList.length ?
              poolList.map(poolItem => {
                return (
                  <ObsPoolComp poolItem={poolItem} key={poolItem.poolId} />
                )
              })
              :
              <Empty
                image='https://static.hzddyy.com/taiyi/tt/public_placeholder_nodata.png'
                description='暂无数据'
              />
          }


        </ScrollView>

      </View >
      {
        showDialog ? <CertifiedPrompt dialogShow={showPopup} setDialogShow={() => setShowPopup(true)} setDialogClose={() => setShowPopup(false)} allowClose={false} tabName='观察池'></CertifiedPrompt> : null
      }

    </>


  );
};

export default memo(ObsPool);
